<!DOCTYPE htmaasdl>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;

        }
        .a {
            background-color: #00a1cc;
        }
        .b {
            background-color: #cc7d00;
        }
        .c {
            background-color: #cc009e;
        }
        .d {
            background-color: #2300cc;
        }
    </style>
</head>
<body>
<div class="a">aa</div>
<div class="b">bb</div>
<div class="c">bb</div>
<div class="d">bb</div>
<script>
//    alert(document.body.clientWidth);
//    alert(document.documentElement.clientWidth);
//    alert(document.compatMode);
    function getBodyInfo(){
        if (document.compatMode == 'BackCompat'){
            var w = document.body.clientWidth;
            var h = document.body.clientHeight;
        } else {

            var w = document.documentElement.clientWidth;
            var h = document.documentElement.clientHeight;
        }
        return {
            width:w,
            height:h
        }
    }
    var bodyInfo = getBodyInfo();
    window.onload = function(){
        var divs = document.getElementsByTagName('div');
        for(var i=0,len=divs.length;i<len;i++){
            divs[i].style.height = bodyInfo.height+'px';
        }
    }
    var lastScroll=0;
    window.onscroll = function(e){
        console.log(e);
        var height = bodyInfo.height;
        var scrollTop = document.body.scrollTop;
        var num = Math.floor(scrollTop/height);
        var m = scrollTop%height;
        //方向
        if (m>10 && scrollTop>lastScroll){
            document.body.scrollTop = (num+1) * height;

        } else {
            document.body.scrollTop = (num) * height;
        }
//        for(var i=0;i<4;i++){
//            if (document.body.scrollTop>(i-1)*height){
//
//                document.body.scrollTop = i*height;
//            }
//        }

       // console.log(document.body.scrollTop);
    }

</script>
</body>
</html>